<template>
  <!-- <el-upload class="avatar-uploader" ref="uploadFile" :action="actionUrl" :file-list="fileList"
   :on-change="fileChange" :on-exceed="exceedHandle" :before-upload="beforeUpload"
  :on-success="onSuccess" :on-remove="onRemove" v-bind="$attrs" with-credentials :show-file-list="false"
  :multiple-limit='1'>
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus "></i>
    <span class="avatar" v-for="(item, index) in fileList" :key='index'>
      <a-image :key="item.url" :url="item.url" width="100%" height="100%" fit="fill" />
    </span>
  </el-upload> -->
  <div>
    <el-upload :action="actionUrl" :show-file-list="true" list-type="picture-card" :on-success="onSuccess" :before-upload="beforeUpload" :on-change="fileChange" :on-exceed="exceedHandle" :file-list="fileList" :on-preview="handlePictureCardPreview">
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'UploadImage',
  components: {
  },
  props: {
    actionUrl: {
      type: String,
      default: '/api/system/upload'
    },
    // 注脚
    suffix: {
      type: String,
      default: ''
    },
    imgFlag: {
      type: Boolean,
      default: false
    },
    // 初始话已上传文件,对外暴露value属性，用于显示隐藏弹框
    fileListUser: {
      type: Array,
      default: () => []
    },
    limit: {
      type: Number,
      default: 0
    },
    // 限制文件上传大小
    limitSize: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      imageUrl: '',
      // fileList: [],
      // fileList: [{ url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-06_16-03-43-063.png' }]
      fileList: []
    }
  },
  computed: {
    // fileList: {
    //   get () {
    //     const filedList = this.filedList.map(x => {
    //       if (x.response && x.response.code === this.$successCode) {
    //         x.url = x.response.data.url
    //       } else if (!x.url && x.raw) {
    //         x.url = URL.createObjectURL(x.raw)
    //       }
    //       return x
    //     })
    //     return [...filedList]
    //   },
    //   set (val) {
    //     this.$emit('update:filedList', val)
    //   }
    // }
  },
  watch: {
    fileListUser: {
      handler (newName, oldName) {
        this.fileList = [...newName]
      }
    }
  },
  methods: {
    // 查看图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    fileChange (file, fileList) {
      console.log(fileList)
      this.fileList = fileList
      this.$emit('change', fileList)
    },
    onSuccess (response, file, fileList) {
      this.fileList = fileList
      if (this.success) {
        this.success({ response, file, fileList })
      }
      this.$emit('success', fileList)
    },
    // 删除
    onRemove (file, fileList) {
      console.log(fileList)
      this.fileList = fileList
      if (this.remove) {
        this.remove({ file, fileList })
      }
      this.$emit('remove', file)
    },
    removeAsync (index) {
      const { fileList } = this
      fileList.splice(index, 1)
      console.log(fileList)
      this.fileList = [...fileList]
    },
    exceedHandle () {
      this.$message.error('文件超出个数限制')
    },
    beforeUpload (file) {
      const { limitSize, limit, actionUrl } = this.$props
      const { fileList } = this
      return new Promise((resolve, reject) => {
        const total = fileList.length

        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].originFileObj && fileList[i].originFileObj.name === file.name && fileList[i].originFileObj.size === file.size) {
            this.$message.error('请不要上传重复附件', 2)
            reject(new Error())
          }
        }

        // 判断上传个数
        if (limit && total > limit) {
          this.$message.error('最多只能上传' + limit + '张', 2)
          reject(new Error())
          return
        }

        // 判断上传文件大小
        if (limitSize && file.size / 1024 / 1024 > limitSize) {
          this.$message.error('文件大小不能超过 ' + limitSize + 'MB!')
          reject(new Error())
          return
        }
        // 判断是否执行上传拦截
        if (!actionUrl) {
          // // 根据后台需求数据格式
          // const form = new FormData()
          // // 文件对象
          // form.append(name, file)
          // 项目封装的请求方法，下面做简单介绍
          // this.$emit('uploadFile', file, rest)
          reject(new Error())
          return
        }
        resolve()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
